<script setup lang="ts">
import { upUserPass } from "@/api/system/user/user";
import router from "@/router";
import { useCounterStore } from "@/stores/counter";
import myCookies from "@/utils/myCookies";
import { Grid } from "@element-plus/icons-vue";
import { ElMessageBox, type FormInstance } from "element-plus";
import { ref } from "vue";
const form = ref({
  oldPass: "",
  newPass: "",
  yesNewPass: "",
});

const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请二次输入新密码'))
  } else if (value !== form.value.newPass) {
    callback(new Error("密码不一致"))
  } else {
    callback()
  }
}
const ruleFormRef =ref()

const rules = {
  oldPass: [
    { required: true, message: '请输入旧密码', trigger: 'blur' }
  ],
  newPass: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 18, message: '密码长度在6~18之间', trigger: 'blur' },
  ],  yesNewPass: [
    { required: true, validator:validatePass2, trigger: 'blur' },
    { min:  6, max: 18, message: '密码长度在6~18之间', trigger: 'blur' },
  ],}
const dialogVisible = ref(false);
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      await upUserPass(form.value)
      myCookies.removeToken()
      dialogVisible.value=false
    } else {
      console.log('error submit!', fields)
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
//用户信息
const userInfo = ref<any>();
const loadUserInfo = () => {
  userInfo.value = JSON.parse(localStorage.getItem("userInfo") || "");
};
//菜单收缩
const collapseMenu = useCounterStore().collapseMenu;
//面包屑
const tabsList = useCounterStore().tabsList;
//个人信息
const myAccount = () => {
  router.push("/myInfo");
};
//注销账户
const logout = () => {
  myCookies.removeToken();
  router.push("/login");
};
const isCurrent = ref(false);
loadUserInfo();
</script>
<template>
  <div class="header-container">
    <div class="l-content">
      <el-button
        @click="collapseMenu"
        style="margin-left: 20px"
        type="primary"
        :icon="Grid"
      />

      <span class="span-breadcrumbt">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            v-for="item in tabsList"
            :to="item.path"
            :class="{ 'current-item': isCurrent }"
            >{{ item.name }}</el-breadcrumb-item
          >
        </el-breadcrumb>
      </span>
    </div>

    <div class="r-content">
      <el-dropdown>
        <span
          class="el-dropdown-link"
          style="display: inline-flex; align-items: center; gap: 8px"
        >
          <span>{{
            userInfo.nickname == "" ? "新用户" + userInfo.username : userInfo.nickname
          }}</span>

          <el-avatar :src="userInfo.avatar" />
        </span>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="myAccount">个人信息</el-dropdown-item>
            <el-dropdown-item @click="dialogVisible = true">修改密码</el-dropdown-item>
            <el-dropdown-item @click="logout">注销</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>

  <el-dialog
    v-model="dialogVisible"
    title="修改账户密码"
    width="500"
    @close="resetForm(ruleFormRef)"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleFormRef"
      label-position="top"
      status-icon
    >
      <el-form-item label="旧密码" prop="oldPass">
        <el-input v-model="form.oldPass" type="password" show-password />
      </el-form-item>
      <el-form-item label="新密码" prop="newPass">
        <el-input
          v-model="form.newPass"
          type="password"
          show-password
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="二次确认密码" prop="yesNewPass">
        <el-input
          v-model="form.yesNewPass"
          type="password"
          show-password
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="less" scoped>
//头像鼠标悬停黑框消除
.el-dropdown-link:focus {
  outline: none;
}

.header-container {
  background-color: rgb(241, 241, 241);
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .l-content {
    .span-breadcrumbt {
      display: inline-block;
      margin-left: 10px;
    }
  }
  .r-content {
    margin-right: 20px;
  }
}
.current-item .el-breadcrumb__inner {
  color: #ff69b4 !important;
}
</style>
